<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				{{ $t('routes.dxn.game_basic_manager') }}
				<el-divider></el-divider>

				<el-form
					ref="ruleForm"
					:rules="rules"
					:model="ruleForm"
					label-width="150px"
					class="rule-form"
					:inline="true"
					label-position="left"
				>
					<div class="flex-box">
						<div class="left">
							<!-- 主动留座离桌 0-默认没有配置 1-关闭 2开启 -->
							<el-form-item
								:label="
									`${$t(
										'dxn.game_rule.leave_seat_table_switch'
									)}`
								"
							>
								<el-switch
									:value="
										ruleForm.leaveSeatReserveTableSwitch
									"
									:disabled="!hasPermission('90630224')"
									active-value="2"
									inactive-value="1"
									@change="handleChangeSwitch"
								></el-switch>
							</el-form-item>
						</div>
						<div v-if="hasPermission('90630224')">
							<el-button
								v-if="!isEdit"
								type="primary"
								@click="handleConfigEdit"
								size="small"
							>
								设置
							</el-button>
							<template v-else>
								<el-button
									:disabled="btnLoading"
									@click="handleConfigCancel"
									size="small"
								>
									{{ $t('dxn.game_rule.cancel_btn') }}
								</el-button>
								<el-button
									type="primary"
									:disabled="btnLoading"
									:loading="btnLoading"
									@click="handleConfigSubmit"
									size="small"
								>
									{{ $t('dxn.game_rule.save_btn') }}
								</el-button>
							</template>
						</div>
					</div>
					<el-row>
						<el-form-item>
							<span slot="label">
								{{
									`${$t(
										'dxn.game_rule.leave_seat_table_config'
									)}:`
								}}
								<el-popover
									placement="top-start"
									width="310"
									trigger="hover"
									content="玩家第一次留座离桌后，计算次数恢复周期"
								>
									<span slot="reference">
										<i class="el-icon-question"></i>
									</span>
								</el-popover>
							</span>
							<!-- 离座留桌间隔 -->
							<el-form-item prop="leaveSeatReserveTableInterval">
								<el-input
									v-model.number="
										ruleForm.leaveSeatReserveTableInterval
									"
									style="width: 100px;"
									v-input="{ name: 'int' }"
									:disabled="!isEdit"
									:maxlength="4"
									@input="
										handleInputTableConfig(
											$event,
											'interval',
											3600
										)
									"
								></el-input>
							</el-form-item>
							<span style="margin-right: 10px;">秒/次，</span>

							<!-- 离座留桌重置间隔 -->
							<el-form-item
								prop="leaveSeatReserveTableResetPeriod"
							>
								<el-input
									v-model.number="
										ruleForm.leaveSeatReserveTableResetPeriod
									"
									style="width: 100px;"
									v-input="{ name: 'int' }"
									:disabled="!isEdit"
									:maxlength="7"
									@input="
										handleInputTableConfig(
											$event,
											'period',
											9999999
										)
									"
								></el-input>
							</el-form-item>
							<span>分钟，</span>
							<!-- 离座留桌重置次数 -->
							<span>恢复至</span>
							<el-form-item
								prop="leaveSeatReserveTableResetCount"
							>
								<el-input
									v-model.number="
										ruleForm.leaveSeatReserveTableResetCount
									"
									style="width: 100px;"
									v-input="{ name: 'int' }"
									:disabled="!isEdit"
									:maxlength="7"
									@input="
										handleInputTableConfig(
											$event,
											'count',
											9999999
										)
									"
								></el-input>
							</el-form-item>
							<span>次</span>
						</el-form-item>
					</el-row>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.gameBasicManager,
	mixins: [list],
	data() {
		return {
			btnLoading: false,
			isEdit: false,
			configType: 23, // 游戏基础管理
			configItem: {},
			ruleForm: {
				configId: 0,
				leaveSeatReserveTableSwitch: '0',
				leaveSeatReserveTableInterval: 0,
				leaveSeatReserveTableResetPeriod: 0,
				leaveSeatReserveTableResetCount: 0
			}
		}
	},
	computed: {
		rules() {
			const checkInterval = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入秒/次'))
				} else {
					return callback()
				}
			}
			const checkPeriod = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入分钟'))
				} else {
					return callback()
				}
			}
			const checkCount = (rule, value, callback) => {
				if (value === '') {
					return callback(new Error('请输入恢复次数'))
				} else {
					return callback()
				}
			}
			return {
				leaveSeatReserveTableInterval: [
					{
						required: true,
						trigger: ['blur', 'change'],
						validator: checkInterval
					}
				],
				leaveSeatReserveTableResetPeriod: [
					{
						required: true,
						trigger: ['blur', 'change'],
						validator: checkPeriod
					}
				],
				leaveSeatReserveTableResetCount: [
					{
						required: true,
						trigger: ['blur', 'change'],
						validator: checkCount
					}
				]
			}
		}
	},
	created() {
		this.getValueAddedConfigByType()
	},
	methods: {
		handleChangeSwitch(val) {
			if (!this.ruleForm.configId) {
				this.$message.closeAll()
				this.$message.error(
					this.$t('dxn.service_manager.config_not_exist_tips')
				)
				return
			}
			this.handleConfirm(val).then(() => {
				const valArr = ['leaveSeatReserveTableSwitch' + '_' + val]
				const params = {
					id: this.ruleForm.configId,
					vals: valArr.join(',')
				}
				this.$api
					.updateValueAddedConfigBend(params)
					.then((res) => {
						if (res?.code === 200) {
							this.$message.success(
								val === '2'
									? this.$t('dxn.game_rule.open_success')
									: this.$t('dxn.game_rule.close_success')
							)
							this.getValueAddedConfigByType()
						}
					})
					.catch(() => {})
			})
		},
		handleConfirm(val) {
			return this.$confirm(
				`${
					val === '2'
						? this.$t('dxn.confirm_start_up')
						: this.$t('dxn.confirm_close')
				}`,
				this.$t('common.components.tip'),
				{
					confirmButtonText: this.$t('common.sure'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					return Promise.resolve()
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					})
					return Promise.reject()
				})
		},
		// 主动留座配置校验
		handleInputTableConfig(val, type, max) {
			if (Number(val) > max) {
				if (type === 'interval') {
					this.ruleForm.leaveSeatReserveTableInterval = max
					return
				}
				if (type === 'period') {
					this.ruleForm.leaveSeatReserveTableResetPeriod = max
					return
				}
				if (type === 'count') {
					this.ruleForm.leaveSeatReserveTableResetCount = max
					return
				}
			}
		},
		getValueAddedConfigByType() {
			const params = { types: [this.configType] }
			this.$api.getValueAddedConfigByTypesBend(params).then((res) => {
				if (res?.code === 200 && Array.isArray(res?.data)) {
					this.configItem = res?.data[0] || {}
					this.ruleForm = Object.assign(
						{ configId: this.configItem.id },
						this.configItem.vals
					)
				}
			})
		},
		handleConfigEdit() {
			this.isEdit = true
		},
		handleConfigCancel() {
			this.isEdit = false
			this.ruleForm = Object.assign(
				{ configId: this.configItem.id },
				this.configItem.vals
			)
		},
		handleConfigSubmit() {
			if (!this.ruleForm.configId) {
				this.$message.closeAll()
				this.$message.error(
					this.$t('dxn.service_manager.config_not_exist_tips')
				)
				return
			}
			const valArr = [
				'leaveSeatReserveTableInterval' +
					'_' +
					this.ruleForm.leaveSeatReserveTableInterval,
				'leaveSeatReserveTableResetPeriod' +
					'_' +
					this.ruleForm.leaveSeatReserveTableResetPeriod,
				'leaveSeatReserveTableResetCount' +
					'_' +
					this.ruleForm.leaveSeatReserveTableResetCount
			]
			const params = {
				id: this.ruleForm.configId,
				vals: valArr.join(',')
			}
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.btnLoading = true
					this.$api
						.updateValueAddedConfigBend(params)
						.then((res) => {
							this.btnLoading = false
							this.isEdit = false
							if (res?.code === 200) {
								this.$message.success(
									this.$t('common.action_success')
								)
								this.getValueAddedConfigByType()
							}
						})
						.catch(() => {
							this.btnLoading = false
						})
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
}

.flex-box {
	display: flex;
	justify-content: space-between;
	.left {
		display: flex;
	}
}
::v-deep .el-icon-question:after {
	font-size: 14px;
	margin-left: -2px;
}
</style>
